<template>
  <div>
    <!-- 搜索 -->
    <div class="tableSearch">
      <el-button type="primary" size="mini" @click="go_back">返回</el-button>
      <el-form size="mini" :model="ruleFormDaily" ref="ruleFormDaily">
        <el-form-item label="选择日期：" label-width="100px" prop="startDate">
          <el-date-picker
            v-model="ruleFormDaily.activityStartTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>―
          <el-date-picker
            v-model="ruleFormDaily.activityEndTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label label-width="120px">
          <el-select v-model="ruleFormDaily.parentId" style="width: 100%;" @change="selected">
            <el-option
              v-for="item in optionsDaily"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label label-width="35px">
          <el-button type="primary" @click="demand(20,1)">查询</el-button>
        </el-form-item>
        <el-form-item label label-width="15px">
          <el-button type="primary" @click="educe()">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 类型 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick" ref="tabs">
      <!-- 基础商品销售 -->
      <el-tab-pane
        label="基础商品销售"
        name="first"
        v-if="isGoodsSell || (!isGoodsSell && !isServiceOrd)"
      >
        <template slot-scope="scope">
          <div class="sumOfMoney">
            <figure>
              <div>
                <figcaption>业绩</figcaption>
                <p v-if="!activityOne">￥0.00</p>
                <p v-else>￥{{activityOne}}</p>
              </div>
              <img src="../../../../src/assets/images/daohang-shujufenxi.png" alt />
            </figure>
            <figure>
              <div>
                <figcaption>数量</figcaption>
                <p v-if="!activityTwo">0</p>
                <p v-else>{{activityTwo}}</p>
              </div>
              <img src="../../../../src/assets/images/gongdanshuju.png" alt />
            </figure>
            <figure>
              <div>
                <figcaption>提成</figcaption>
                <p v-if="!activityThree">￥0.00</p>
                <p v-else>￥{{activityThree}}</p>
              </div>
              <img src="../../../../src/assets/images/gongdanshuju_slices.png" alt />
            </figure>
          </div>
          <div class="statement">
            <el-table :data="tableDataDetails" stripe style="width: 95%">
              <el-table-column prop="serial" type="index" align="center" label="序号" width="80"></el-table-column>
              <el-table-column prop="createTime" align="center" label="日期"></el-table-column>
              <el-table-column prop="employeeName" align="center" label="岗位"></el-table-column>
              <el-table-column prop="salerName" align="center" label="员工姓名"></el-table-column>
              <el-table-column prop="orderCode" align="center" label="订单号"></el-table-column>
              <el-table-column prop="goodsName" align="center" label="商品名称">
                <template slot-scope="scope">
                  <span class="retreat" v-if="!scope.row.isReturn == 0">退</span>
                  <span>{{scope.row.goodsName}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="goodsCount" align="center" label="数量"></el-table-column>
              <el-table-column prop="payAmount" align="center" label="实收金额">
                <template slot-scope="scope">
                  <span v-if="!scope.row.payAmount">￥0.00</span>
                  <span v-else-if="scope.row.payAmount < 0">-￥{{Math.abs(scope.row.payAmount)}}</span>
                  <span v-else>￥{{scope.row.payAmount}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="commissionValue" :formatter="formatCommissionValue" align="center" label="提成比例">

              </el-table-column>
              <el-table-column prop="amount" align="center" label="提成">
                <template slot-scope="scope">
                  
                  <span v-if="scope.row.planType == 1 && scope.row.commissionWay == 1 ">--</span>

                  <span v-else-if="!scope.row.amount">￥0.00</span>
                  <span v-else-if="scope.row.amount < 0">-￥{{Math.abs(scope.row.amount)}}</span>
                  <span v-else>￥{{scope.row.amount}}</span>

                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-tab-pane>
      <!-- 活动期商品销售 -->
      <el-tab-pane
        label="活动期商品销售"
        name="second"
        v-if="isGoodsSell || (!isGoodsSell && !isServiceOrd)"
      >
        <template slot-scope="scope">
          <div class="sumOfMoney">
            <figure>
              <div>
                <figcaption>业绩</figcaption>
                <p v-if="!activityOne">￥0.00</p>
                <p v-else>￥{{activityOne}}</p>
              </div>
              <img src="../../../../src/assets/images/daohang-shujufenxi.png" alt />
            </figure>
            <figure>
              <div>
                <figcaption>数量</figcaption>
                <p v-if="!activityTwo">0</p>
                <p v-else>{{activityTwo}}</p>
              </div>
              <img src="../../../../src/assets/images/gongdanshuju.png" alt />
            </figure>
            <figure>
              <div>
                <figcaption>提成</figcaption>
                <p v-if="!activityThree">￥0.00</p>
                <p v-else>￥{{activityThree}}</p>
              </div>
              <img src="../../../../src/assets/images/gongdanshuju_slices.png" alt />
            </figure>
          </div>
          <div class="statement">
            <el-table :data="tableDataDetails" stripe style="width: 95%">
              <el-table-column prop="serial" type="index" align="center" label="序号" width="80"></el-table-column>
              <el-table-column prop="createTime" align="center" label="日期"></el-table-column>
              <el-table-column prop="employeeName" align="center" label="岗位"></el-table-column>
              <el-table-column prop="salerName" align="center" label="员工姓名"></el-table-column>
              <el-table-column prop="orderCode" align="center" label="订单号"></el-table-column>
              <el-table-column prop="activityDate" align="center" label="活动时间"></el-table-column>
              <el-table-column prop="goodsName" align="center" label="商品">
                <template slot-scope="scope">
                  <span class="retreat" v-if="!scope.row.isReturn == 0">退</span>
                  <span>{{scope.row.goodsName}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="goodsCount" align="center" label="数量">
                <template slot-scope="scope">
                  <span v-if="!scope.row.goodsCount">0</span>
                  <span v-else>{{scope.row.goodsCount}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="payAmount" align="center" label="实收金额">
                <template slot-scope="scope">
                  <span v-if="!scope.row.payAmount">￥0.00</span>
                  <span v-else-if="scope.row.payAmount < 0">-￥{{Math.abs(scope.row.payAmount)}}</span>
                  <span v-else>￥{{scope.row.payAmount}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="commissionValue"
                align="center"
                :formatter="formatCommissionValue"
                label="提成比例"
              ></el-table-column>
              <el-table-column prop align="center" label="提成">
                <template slot-scope="scope">
                  <span v-if="!scope.row.amount">￥0.00</span>
                  <span v-else-if="scope.row.amount < 0">-￥{{Math.abs(scope.row.amount)}}</span>
                  <span v-else>￥{{scope.row.amount}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-tab-pane>
      <!-- 服务销售 -->
      <el-tab-pane label="服务销售" name="third" v-if="isServiceOrd || (!isGoodsSell && !isServiceOrd)">
        <template slot-scope="scope">
          <div class="sumOfMoney">
            <figure>
              <div>
                <figcaption>业绩</figcaption>
                <p v-if="!activityOne">￥0.00</p>
                <p v-else>￥{{activityOne}}</p>
              </div>
              <img src="../../../../src/assets/images/daohang-shujufenxi.png" alt />
            </figure>
            <figure>
              <div>
                <figcaption>数量</figcaption>
                <p v-if="!activityTwo">0</p>
                <p v-else>{{activityTwo}}</p>
              </div>
              <img src="../../../../src/assets/images/gongdanshuju.png" alt />
            </figure>
            <figure>
              <div>
                <figcaption>提成</figcaption>
                <p v-if="!activityThree">￥0.00</p>
                <p v-else>￥{{activityThree}}</p>
              </div>
              <img src="../../../../src/assets/images/gongdanshuju_slices.png" alt />
            </figure>
          </div>
          <div class="statement">
            <el-table :data="tableDataDetails" stripe style="width: 95%">
              <el-table-column prop="serial" type="index" align="center" label="序号" width="80"></el-table-column>
              <el-table-column prop="createTime" align="center" label="日期"></el-table-column>
              <el-table-column prop="employeeName" align="center" label="岗位"></el-table-column>
              <el-table-column prop="salerName" align="center" label="员工姓名"></el-table-column>
              <el-table-column prop="orderCode" align="center" label="订单号"></el-table-column>
              <el-table-column prop="goodsName" align="center" label="服务"></el-table-column>
              <el-table-column prop="goodsCount" align="center" label="数量"></el-table-column>
              <el-table-column prop="payAmount" align="center" label="实收金额">
                <template slot-scope="scope">
                  <span v-if="!scope.row.payAmount">￥0.00</span>
                  <span v-else-if="scope.row.payAmount < 0">-￥{{Math.abs(scope.row.payAmount)}}</span>
                  <span v-else>￥{{scope.row.payAmount}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="commissionValue"
                align="center"
                :formatter="formatCommissionValue"
                label="提成比例"
              ></el-table-column>
              <el-table-column prop="amount" align="center" label="提成">
                <template slot-scope="scope">
                  <span v-if="scope.row.planType == 1 && scope.row.commissionWay == 1 ">--</span>

                  <span v-else-if="!scope.row.amount">￥0.00</span>
                  <span v-else-if="scope.row.amount < 0">-￥{{Math.abs(scope.row.amount)}}</span>
                  <span v-else>￥{{scope.row.amount}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-tab-pane>
      <!-- 计次卡销售 -->
      <el-tab-pane
        label="计次卡销售"
        name="magcard"
        v-if="isServiceOrd || (!isGoodsSell && !isServiceOrd)"
      >
        <template slot-scope="scope">
          <div class="sumOfMoney">
            <figure>
              <div>
                <figcaption>业绩</figcaption>
                <p v-if="!activityOne">￥0.00</p>
                <p v-else>￥{{activityOne}}</p>
              </div>
              <img src="../../../../src/assets/images/daohang-shujufenxi.png" alt />
            </figure>
            <figure>
              <div>
                <figcaption>数量</figcaption>
                <p v-if="!activityTwo">0</p>
                <p v-else>{{activityTwo}}</p>
              </div>
              <img src="../../../../src/assets/images/gongdanshuju.png" alt />
            </figure>
            <figure>
              <div>
                <figcaption>提成</figcaption>
                <p v-if="!activityThree">￥0.00</p>
                <p v-else>￥{{activityThree}}</p>
              </div>
              <img src="../../../../src/assets/images/gongdanshuju_slices.png" alt />
            </figure>
          </div>
          <div class="statement">
            <el-table :data="tableDataDetails" stripe style="width: 95%">
              <el-table-column prop="serial" type="index" align="center" label="序号" width="80"></el-table-column>
              <el-table-column prop="createTime" align="center" label="日期"></el-table-column>
              <el-table-column prop="employeeName" align="center" label="岗位"></el-table-column>
              <el-table-column prop="salerName" align="center" label="员工姓名"></el-table-column>
              <el-table-column prop="orderCode" align="center" label="订单号"></el-table-column>
              <el-table-column prop="goodsName" align="center" label="次卡">
                <template slot-scope="scope">
                  <span class="retreat" v-if="!scope.row.isReturn == 0">退</span>
                  <span>{{scope.row.goodsName}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="goodsCount" align="center" label="数量"></el-table-column>
              <el-table-column prop="payAmount" align="center" label="实收金额">
                <template slot-scope="scope">
                  <span v-if="!scope.row.payAmount">￥0.00</span>
                  <span v-else-if="scope.row.payAmount < 0">-￥{{Math.abs(scope.row.payAmount)}}</span>
                  <span v-else>￥{{scope.row.payAmount}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="commissionValue"
                align="center"
                :formatter="formatCommissionValue"
                label="提成比例"
              ></el-table-column>
              <el-table-column prop="amount" align="center" label="提成">
                <template slot-scope="scope">
                  <span v-if="scope.row.planType == 1 && scope.row.commissionWay == 1 ">--</span>

                  <span v-else-if="!scope.row.amount">￥0.00</span>
                  <span v-else-if="scope.row.amount < 0">-￥{{Math.abs(scope.row.amount)}}</span>
                  <span v-else>￥{{scope.row.amount}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-tab-pane>
      <!-- 服务劳动 -->
      <el-tab-pane
        label="服务劳动"
        name="fourth"
        v-if="isServiceOrd || (!isGoodsSell && !isServiceOrd)"
      >
        <template slot-scope="scope">
          <div class="sumOfMoney">
            <figure>
              <div>
                <figcaption>业绩</figcaption>
                <p v-if="!activityOne">￥0.00</p>
                <p v-else>￥{{activityOne}}</p>
              </div>
              <img src="../../../../src/assets/images/daohang-shujufenxi.png" alt />
            </figure>
            <figure>
              <div>
                <figcaption>数量</figcaption>
                <p v-if="!activityTwo">0</p>
                <p v-else>{{activityTwo}}</p>
              </div>
              <img src="../../../../src/assets/images/gongdanshuju.png" alt />
            </figure>
            <figure>
              <div>
                <figcaption>提成</figcaption>
                <p v-if="!activityThree">￥0.00</p>
                <p v-else>￥{{activityThree}}</p>
              </div>
              <img src="../../../../src/assets/images/gongdanshuju_slices.png" alt />
            </figure>
          </div>
          <div class="statement">
            <el-table :data="tableDataDetails" stripe style="width: 95%">
              <el-table-column prop="serial" type="index" align="center" label="序号" width="80"></el-table-column>
              <el-table-column prop="createTime" align="center" label="日期"></el-table-column>
              <el-table-column prop="employeeName" align="center" label="岗位"></el-table-column>
              <el-table-column prop="salerName" align="center" label="员工姓名"></el-table-column>
              <el-table-column prop="orderCode" align="center" label="订单号"></el-table-column>
              <el-table-column prop="goodsName" align="center" label="服务"></el-table-column>
              <el-table-column prop="goodsCount" align="center" label="数量"></el-table-column>
              <el-table-column prop="payAmount" align="center" label="实收金额">
                <template slot-scope="scope">
                  <span v-if="!scope.row.payAmount">￥0.00</span>
                  <span v-else-if="scope.row.payAmount < 0">-￥{{Math.abs(scope.row.payAmount)}}</span>
                  <span v-else>￥{{scope.row.payAmount}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="commissionValue"
                align="center"
                :formatter="formatCommissionValue"
                label="提成比例"
              ></el-table-column>
              <el-table-column prop="amount" align="center" label="提成">
                <template slot-scope="scope">
                  <span v-if="!scope.row.amount">￥0.00</span>
                  <span v-else-if="scope.row.amount < 0">-￥{{Math.abs(scope.row.amount)}}</span>
                  <span v-else>￥{{scope.row.amount}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
    <!-- 分页 -->
    <div class="pageblock">
      <el-button :disabled="dis" size="small" type="primary" class="topage" @click="toPage">确定</el-button>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,20,30,40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalItems"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  findEmployeeTypeList,
  employeeCommissionDetail,
  findEmployeeListPage,
  employeeCommissionDetailExport
} from "@/api";
var fileDownload = require("js-file-download");
export default {
  data() {
    return {
      busineOne: false,
      isGoodsSell: false, //判断tab栏显示隐藏
      isServiceOrd: false, //判断tab栏显示隐藏
      outlet: this.$route.query.outlet,
      times: "",
      num: "01",
      ruleFormDaily: {
        startDate: "", //日期
        parentId: "", //岗位id
        activityStartTime: "",
        activityEndTime: ""
      },
      optionsDaily: [], //岗位数组
      activeName: "first",
      tableDataDetails: [],
      dis: false,
      currentPage: 1,
      pageSize: 20,
      totalItems: 0,
      type: 0,
      nMonth: this.$route.query.settings,
      salerId: this.$route.query.salerId,
      salerName: this.$route.query.salerName,
      shopId: this.$route.query.storeId,
      businessScope: this.$route.query.businessScope,
      //活动期商品销售
      activityOne: 0,
      activityTwo: 0,
      activityThree: 0,
      busine: ""
    };
  },
  computed: mapState(["sub", "merchantId", "power", "isShop", "linkName"]),
  mounted() {
    //数据回显
    if (this.businessScope.indexOf("0") != -1) {
      this.isGoodsSell = true;
      this.activeName = "first";
    }
    if (this.businessScope.indexOf("1") != -1) {
      this.isServiceOrd = true;
      if (!this.isGoodsSell) {
        this.activeName = "third";
      }
    } else {
      if (!this.isGoodsSell) {
        this.activeName = "first";
      }
    }
    this.startStop();
    this.echoData(this.pageSize, 1);
    this.findEmployeeList();
  },
  methods: {
    selected(val) {
      this.ruleFormDaily.parentId = val;
    },
    //查看明细
    echoData(pageSize, pageNo) {
      let objTwo = {
        shopId: this.shopId, //门店ID
        salerId: this.salerId, //员工id
        searchDate: this.nMonth, //活动时间
        type: this.type,
        pageSize: pageSize,
        pageNo: pageNo
      };
      employeeCommissionDetail(objTwo).then(res => {
        let tTmie = res.data;
        this.ruleFormDaily.activityStartTime = tTmie.startDate;
        this.ruleFormDaily.activityEndTime = tTmie.endDate;
        this.activityOne = res.data.payAmountSum;
        this.activityTwo = res.data.orderSum;
        this.activityThree = res.data.commission;
        this.totalItems = res.data.total;
        this.tableDataDetails = tTmie.list;
        console.log("this.tableDataDetails:",this.tableDataDetails)
      });
    },
    demand(pageSize, pageNo) {
      //查询
      let obj = {
        shopId: this.shopId,
        salerId: this.ruleFormDaily.parentId,
        startDate: this.ruleFormDaily.activityStartTime,
        endDate: this.ruleFormDaily.activityEndTime,
        type: this.type,
        pageSize: pageSize,
        pageNo: pageNo
      };
      employeeCommissionDetail(obj).then(res => {
        let dataObj = res.data;
        this.activityOne = dataObj.payAmountSum;
        this.activityTwo = dataObj.orderSum;
        this.activityThree = dataObj.commission;
        this.totalItems = res.data.total; //总条数
        this.tableDataDetails = res.data.list;
      });
    },
    //获取员工列表
    findEmployeeList() {
      let objThree = {
        shopId: this.shopId
      };
      findEmployeeListPage(objThree).then(res => {
        this.optionsDaily = res.data.list;
        let staff = "";
        let tabulaTion = this.optionsDaily.forEach(item => {
          if (this.salerName == item.name) {
            staff = item.id;
            this.ruleFormDaily.parentId = staff;
          }
        });
      });
    },

    handleClick(tab, event) {
      this.pageSize = 20;
      this.pageNo = 1;
      if (tab.name == "first") {
        this.type = 0;
      } else if (tab.name == "second") {
        this.type = 4;
      } else if (tab.name == "third") {
        this.type = 1;
      } else if (tab.name == "magcard") {
        this.type = 2;
      } else if (tab.name == "fourth") {
        this.type = 3;
      }
      let info = {
        shopId: this.shopId,
        salerId: this.ruleFormDaily.parentId,
        startDate: this.ruleFormDaily.activityStartTime,
        endDate: this.ruleFormDaily.activityEndTime,
        type: this.type,
        pageSize: this.pageSize,
        pageNo: this.pageNo
      };
      console.log("info:", info);
      employeeCommissionDetail(info).then(res => {
        let comment = res.data;
        this.activityOne = res.data.payAmountSum;
        this.activityTwo = res.data.orderSum;
        this.activityThree = res.data.commission;
        this.totalItems = res.data.total; //总条数
        this.tableDataDetails = comment.list;
      });
    },
    formatCommissionValue(row, column, cellValue, index) {
      if (row.commissionWay == "1") {
        if (row.planType == 1 && this.type == 0) {
          return (cellValue = "按月业绩区间固定金额提成")
        } else if (row.planType == 1 && this.type == 1 ) {
          return (cellValue = "按月业绩区间固定金额提成")
        } else if (row.planType == 1 && this.type == 2 ) {
          return (cellValue = "按月业绩区间固定金额提成")
        } else {
          return cellValue + "元";
        }
      } 
      if (row.commissionWay == "0") {
        return cellValue + "%";
      } 
      if (row.commissionWay == "2") {
        return (cellValue = "--")
      }
    },
    educe() {
      //导出
      let objTwo = {
        shopId: this.shopId,
        salerId: this.ruleFormDaily.parentId,
        startDate: this.ruleFormDaily.activityStartTime,
        endDate: this.ruleFormDaily.activityEndTime,
        type: this.type
      };
      if (this.tableDataDetails.length == "0") {
        this.$message.error("数据为空不能导出");
      } else {
        employeeCommissionDetailExport(objTwo).then(res => {
          let fileName = "员工提成明细表.xlsx";
          fileDownload(res, fileName);
        });
      }
    },
    go_back() {
      history.go(-1);
    },
    startStop() {
      this.times = this.settings;
    },
    //分页
    toPage() {
      this.demand(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.demand(this.pageSize, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.demand(this.pageSize, this.currentPage);
    }
  }
};
</script>

<style scoped>
label {
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  padding: 0 0 10px 0;
}
.sumOfMoney {
  display: flex;
}
.sumOfMoney figure {
  width: 200px;
  height: 100px;
  margin-left: 20px;
  background: white;
  display: flex;
  justify-content: space-between;
  border-radius: 5px;
  box-shadow: 3px 1px 3px 1px #a9a9a9;
}
.sumOfMoney figure:nth-of-type(1) {
  border-left: 8px #ed6a30 solid;
}
.sumOfMoney figure:nth-of-type(2) {
  border-left: 8px #4082e1 solid;
}
.sumOfMoney figure:nth-of-type(3) {
  border-left: 8px #64c1d3 solid;
}
.sumOfMoney figure p {
  font-size: 24px;
  color: red;
  font-weight: 600;
  margin-left: 5px;
}
.sumOfMoney figure figcaption {
  padding: 13px 0 5px 0;
  margin-left: 5px;
}
.statement {
  margin-left: 20px;
  margin-top: 20px;
}
img {
  width: 50px;
  height: 50px;
  margin-top: 50px;
}
.retreat {
  padding: 2px 2px;
  line-height: 15px;
  background: red;
  font-size: 10px;
  color: white;
}
</style>
